<template>
  <div class="yk-cashSure">
    <van-cell-group>
			<van-cell class="yk-head" value="兑换油卡充值卡" />
		</van-cell-group>
    <section class="card-goods">
        <article class="card-goods__item" v-for="item in goods" :key="item.money">
          <van-card
            :title="item.company"
            :desc="'面值：' + item.money"
          >
          <img slot="thumb" :src="item.thumb"/>
          <div slot="tags" class="yk-kucun">X {{item.num}}</div>
          </van-card>
        </article>
      <!-- </van-checkbox-group> -->
    </section>
    <van-submit-bar
      button-text="确定"
      @submit="onSubmit"
    >
      <p class="submit-total submit-total-top">合计：{{totalPrice}}</p>
      <p class="submit-total submit-total-bottom">剩余总权益： {{surplusPrice}}</p>
    </van-submit-bar>
  </div>
</template>

<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
import money50 from '../../../assets/img/mony50.jpg';
import money100 from '../../../assets/img/money100.jpg'
import money500 from '../../../assets/img/money500.jpg'
import money1000 from '../../../assets/img/money1000.jpg'
import {getOilCount, exchange} from './../../../api/rightsInterests'
export default {
  name: 'yk-cash',
  data() {
    return {
      checked: false,
      checkedGoods: [],
      value:'',
      goods: JSON.parse(this.$route.query.paramsObj) ? JSON.parse(this.$route.query.paramsObj) : sessionStorage.getItem('params'),
      totalPrice: this.$route.query.totals ? this.$route.query.totals : JSON.parse(sessionStorage.getItem('countTotal')).total,
      surplusPrice: this.$route.query.surplus ? this.$route.query.surplus : JSON.parse(sessionStorage.getItem('countTotal')).surplus
    };
  },

  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;
      return '提交' + (count ? `(${count})` : '');
    }
  },
  created() {
    if (this.$route.query.paramsObj) {
      const obj = {total: this.$route.query.totals, surplus: this.$route.query.surplus};
      sessionStorage.setItem('params', this.$route.query.paramsObj);
      sessionStorage.setItem('countTotal', JSON.stringify(obj));
    }
  },
  methods: {
    onSubmit() {
      let params = JSON.parse(JSON.stringify(this.goods));
      let totalNum = 0;
      params.forEach(element => {
        totalNum = totalNum*1 + element.num*1
        element.total = element.num;
        delete element.checked;
        delete element.thumb;
        delete element.num;
      });
      const obj = {exMoney: this.totalPrice, phone: sessionStorage.getItem('phone'), moneysCountList: params}
      exchange(obj).then(res => {
        this.$dialog.alert({
          confirmButtonText: '查看详情',
          message: '您的权益兑换成功，一共包含' + totalNum + '张油卡充值卡'
        }).then(() => {
          this.$router.replace({name: 'ykdetailed', query: {exchangeId: res.recordId, status: '兑换'}});
        });
      }).catch(error => {
        if (error.status !== 100 && error.status !== 102 ) {
          this.$toast.fail(error.message);
        }
      })
    },
  }
};
</script>
<style lang="less">
.yk-cashSure{
  .yk-head{
    text-align: center;
    .van-cell__value--alone{
      text-align: center !important;
      height:25px;
      font-size:18px;
      font-family:PingFang SC;
      font-weight:normal;
      line-height:25px;
      color:rgba(51,51,51,1);
      opacity:1;
    }
  }
  .van-card{
    background: #ffffff !important;
    padding-left: 152px !important;
    &:not(:first-child){
      margin-top: 0px !important;
    }
    .van-card__thumb{
      width: 126px !important;
      height: 90px;
    }
    .van-card__title{
      font-size:16px;
      font-family:PingFang SC;
      font-weight:300;
      line-height:22px;
      color:rgba(51,51,51,1);
      opacity:1;
    }
  }
}
</style>

<style lang="less" scoped>
.yk-cashSure{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  .yk-head{
    text-align: center;
    .van-cell__value--alone{
      text-align: center !important;
      height:25px;
      font-size:18px;
      font-family:PingFang SC;
      font-weight:normal;
      line-height:25px;
      color:rgba(51,51,51,1);
      opacity:1;
    }
  }
  .card-goods {
    padding: 20px 0;
    height: calc( 100% - 70px );
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    &__item {
      position: relative;
      background-color: #ffffff;
      // margin-bottom: 20px;
      padding: 5px 0px;
      border-bottom: 1px solid #f2f2f2;
      // border-radius: 6px;
      .van-checkbox__label {
        width: 100%;
        padding: 0 10px 0 15px;
        box-sizing: border-box;
      }

      .van-checkbox__icon {
        top: 50%;
        left: 10px;
        z-index: 1;
        position: absolute;
        margin-top: -10px;
      }

      .van-card__price {
        color: #f44;
      }
      .van-card{
        background: #ffffff !important;
        padding-left: 152px !important;
        &:not(:first-child){
          margin-top: 0px !important;
        }
        .van-card__thumb{
          width: 126px !important;
          height: 90px;
        }
        .van-card__title{
          font-size:16px;
          font-family:PingFang SC;
          font-weight:300;
          line-height:22px;
          color:rgba(51,51,51,1);
          opacity:1;
        }
        .van-card__desc{
          font-size:12px;
          font-family:PingFang SC;
          font-weight:300;
          line-height:17px;
          color:rgba(255,138,65,1);
          opacity:1;
          margin-top: 5px;
        }
        .yk-kucun{
          font-size:12px;
          font-family:PingFang SC;
          font-weight:300;
          line-height:17px;
          color:rgba(136,136,136,1);
          opacity:1;
          margin-top: 5px;
        }
      }
    }
  }
  .van-card__footer{
    left: 152px !important;
    .van-stepper__minus, .van-stepper__plus{
      height: 22px;
      width: 20px;
    }
    .van-stepper__input{
      height: 18px;
      width: 28px;
      font-size: 14px;
    }
  }
  .van-submit-bar__bar{
    padding-left: 20px !important;
    .submit-total{
      font-size: 12px;
      position: absolute;
      right: 126px;
    }
    .submit-total-top{
      top: 5px;
    }
    .submit-total-bottom{
      bottom: 5px;
    }
    .van-button--danger{
      background-color: #FF8A41 !important;
      border: 1px solid #FF8A41 !important;
      right: 20px;
      font-size:14px;
      font-family:PingFang SC;
      font-weight:400;
      line-height:20px;
      color:rgba(255,255,255,1);
      opacity:1;
      height: 38px;
      width: 84px;
      border-radius: 34px;
    }
  }
}
</style>
